<script setup>
import { ref } from 'vue';

let select = ref("Need To Do")
let ToDoListLength = 0
// 添加任务
function addTask() {
    const content = document.getElementById("tasks").value
    // 检查是否有储存数据
    const calLength = eval(sessionStorage.getItem("ToDoListLength"))
    if (eval(sessionStorage.getItem("ToDoListLength")) != 0) {
        sessionStorage.setItem("ToDoListLength", calLength + 1)
        sessionStorage.setItem(calLength + 1, content)
    } else {
        ToDoListLength++
        sessionStorage.setItem("ToDoListLength", ToDoListLength)
        sessionStorage.setItem(ToDoListLength, content)
    }
    list.append(createTask(content, calLength + 1))
}
// 创建任务
function createTask(content, index) {

    let task = document.createElement("li")
    task.innerHTML = content
    let btn = document.createElement("span")
    btn.append(editTask(index))
    btn.append(deleteTask(index))
    // btn.append(confirmTask(index))
    task.appendChild(btn)
    return task
}
// 创建删除按钮
function deleteTask(index) {
    let del = document.createElement("span")
    del.classList.add("iconfont", "icon-laji_huabanfuben")
    del.addEventListener("click", (e) => {
        const gar = e.target.parentNode.parentNode
        //当前储存任务的索引
        const taskindex = index
        sessionStorage.removeItem(taskindex)
        gar.parentNode.removeChild(gar)
    })
    return del
}
// 创建确认按钮
// function confirmTask(index) {
//     let add = document.createElement("span")
//     add.classList.add("iconfont", "icon-jieshou")
//     add.addEventListener("click", (e) => {
//         const gar = e.target.parentNode.parentNode
//         //当前储存任务的索引
//         const taskindex = index
//         sessionStorage.removeItem(taskindex)
//         sessionStorage.setItem(index + "add", gar.innerText)
//         createTaskNeed(gar.innerText)
//         gar.parentNode.removeChild(gar)
//     })
//     return add
// }
// 执行确认任务
function createTaskNeed(content) {
    const TaskNeed = document.createElement("option")
    TaskNeed.innerHTML = content
    document.getElementById("TaskNeed").append(TaskNeed)
}
// 编辑按钮
function editTask(index) {
    let edit = document.createElement("span")
    edit.classList.add("iconfont", "icon-bianji")
    edit.addEventListener("click", (e) => {
        const gar = e.target.parentNode.parentNode
        //当前储存任务的索引
        editStast(gar, gar.innerText, index)

    })
    return edit

}
//编辑任务
function editStast(gar, content, index) {

    let NewTask = document.createElement("input")
    NewTask.value = content
    // NewTask.append(finishTask(NewTask,gar,index))
    NewTask.addEventListener("change", (e) => {
        sessionStorage.setItem(index, e.target.value)
        gar.innerText = e.target.value
        let btn = document.createElement("span")
        btn.append(editTask(index))
        btn.append(deleteTask(index))
        // btn.append(confirmTask(index))
        gar.appendChild(btn)
        NewTask.parentNode.removeChild(NewTask)
    })
    gar.parentNode.insertBefore(NewTask, gar)


}

// 页面刷新保留
window.onload = function () {
    for (let i = 1; i <= eval(sessionStorage.getItem("ToDoListLength")); i++) {

        if (sessionStorage.getItem(i) != null) {
            list.append(createTask(sessionStorage.getItem(i), i),)
            console.log(sessionStorage.getItem(i))
        } else {
            if (sessionStorage.getItem(i + "add") != null) {
                createTaskNeed(sessionStorage.getItem(i + "add"))
                console.log(sessionStorage.getItem(i + "add"))
            }
        }

    }
}

</script>
<template>
    <div class="container">
        <input type="text" id="tasks" placeholder="add task">
        <span>
            <span class="iconfont icon-xieru" @click="addTask()"></span>
        </span>
        <ul id="list">

        </ul>
    </div>
    <!-- <div class="NeedToDo">
        <select id="TaskNeed" v-model="select">
            <option>Need To Do</option>
        </select>
        {{ select }}
    </div> -->

</template>
<style>
body,
html {
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}

#tasks {
    width: 100%;
    border: none;
}

.container {
    position: relative;
    width: 15%;
    left: 45%;
    background-color: antiquewhite;
    height: 500px;
    overflow: hidden;
}

.container>span {
    position: absolute;
    right: 0px;
}

#list {
    margin-top: 40px;
    position: absolute;
    list-style: none;
    width: 100%;
    margin-left: 0%;
    padding: 0%;
}

#list>li {
    text-align: left;
    background-color: whitesmoke;
    border: black 1px solid;
}

.icon-xieru {

    right: 0px;
}

.icon-xieru:hover {
    color: aqua;
}

#list>li>span {
    position: absolute;
    right: 0px;
}



.icon-laji_huabanfuben {
    cursor: pointer;

}

.icon-laji_huabanfuben:hover {
    color: red;
}

.icon-jieshou {
    cursor: pointer;
}

.icon-jieshou:hover {
    color: aquamarine;
}

.icon-bianji {
    cursor: pointer;
}

.icon-bianji:hover {
    color: rgb(148, 255, 127);

}


.NeedToDo {
    position: absolute;
    margin-top: 10px;
    width: 15%;
    top: 0%;
    right: 5%;
    background-color: antiquewhite;
    height: 300px;
    overflow: auto;
    word-wrap: break-word;
}

#TaskNeed {
    width: 100%;
}
</style>